<template>
	<view>
		<!-- swiper -->
		<view class="sw">
			<swiper :indicator-dots="false" style="width: 100%;height: 100%;" :autoplay="true" :interval="3000"
				:duration="300">
				<swiper-item v-for="(item,index) in imgs">
					<image :src="item" style="width: 100%;height: 100%;" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 活动标题 -->
		<view class="title flex justify-center align-center">
			<view class="title-box flex align-center">
				{{info.activityTitle}}
			</view>
		</view>
		<!-- 活动内容 -->
		<view class="info flex justify-center">
			<view class="info-box" v-html="content">

			</view>
		</view>

		<!-- 加入按钮 -->
		<view class="submit flex justify-center align-center">
			<view class="submit-box flex justify-center align-center" @click="joinHd()">
				加入活动
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activityId: '',
				info: {},
				content: '',
				imgs: [],
			};
		},
		onLoad(option) {
			console.log()
			this.activityId = option.activityId
			this.getInfo()
		},
		methods: {
			//加入活动
			joinHd() {
				let data = {
					activityId: this.activityId,
					shopId: uni.getStorageSync('shopId')
				}
				this.$Request.get("/app/activityManage/shopJoinActivity", data).then(res => {
					if (res.code == 0) {
						uni.showModal({
							title: '提示',
							content: '确定加入该活动？',
							complete(ret) {
								if (ret.confirm) {
									uni.showToast({
										title: '加入成功'
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 1000)
								}

							}
						})

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			//活动详情
			getInfo() {
				let data = {
					activityId: this.activityId
				}
				this.$Request.get("/app/activityManage/getActivityInfo", data).then(res => {
					if (res.code == 0) {
						this.content = res.data.activityContent.replace(new RegExp("img", "g"),
							'img style="width:100%;height:auto;"')
						this.info = res.data
						this.imgs = res.data.activityImage.split(',')
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.sw {
		width: 100%;
		height: 300rpx;
	}

	.title {
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;

		.title-box {
			width: 686rpx;
			height: 100%;
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.info {
		width: 100%;
		height: auto;

		.info-box {
			width: 686rpx;
			height: 100%;
		}
	}

	.submit {
		width: 100%;
		height: 160rpx;
		position: fixed;
		bottom: 0;
		background-color: #ffffff;

		.submit-box {
			width: 686rpx;
			height: 88rpx;
			background-color: #FCD202;
			border-radius: 40rpx;
		}
	}
</style>
